<template>
	<view class="select-coupon">
		<view class="align-center justify-between" @click="showPopup=true">
			<slot name="title">
				<text>{{title}}</text>
			</slot>
			<slot name="value">
				<view class="align-center">
					<text class="mr10">{{confirmData.coupon_name||'请选择优惠券'}}</text>
					<u-icon name="arrow-right" color="#A9A9A9" />
				</view>
			</slot>
		</view>
		<view class="">
			<u-popup :show="showPopup" round="20rpx" @close="showPopup=false" closeable>
				<view class="popup_content column radius20 ">
					<text class="fs30 bold center mt25">{{popupTitle}}</text>
					<u-divider />
					<view class="column scrolly plr30" style="height: 600rpx;" v-if="couponList.length>0">
						<view class="coupon_item column justify-between" v-for="(item, index) in couponList" :key="item.id">
							<view class="align-center flex-1">
								<text class="fs45 bold base-price"><text class="fs30">¥</text>{{item.mitigate_money}}</text>
								<view class="column ml50 flex-1">
									<text class="fs32 base-price bold">{{item.title}}</text>
									<text class="mt6 fs24 color6">无使用门槛，最多优惠12元</text>
								</view>
							</view>
							<view class="align-center justify-between mt30">
								<text class="fs24 color8">有效期至:{{item.end_time}}</text>
								<view class="">
									<u-icon name="checkmark" color="#3f79eb" size="50rpx" bold />
								</view>
							</view>
						</view>
					</view>
					<view class="centerV flex-1 hb" v-else>
						<fr-empty-coupon />
					</view>
					<view class="align-center mt50 p30" style="gap: 20rpx;">
						<u-button text="暂不使用" type="primary" plain :customStyle="{height:'80rpx'}" @click="onCancel" />
						<u-button text="确认" type="primary" :customStyle="{height:'80rpx'}" @click="onConfirm" />
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		onMounted,
		ref
	} from 'vue';
	import {
		selectCoupon
	} from "@/api/home/coupon.js";
	const queryParams = ref({
		use_type: '',
		total_price: ''
	})
	const props = defineProps({
		title: {
			type: String,
			default: '优惠券'
		},
		value: {
			type: String,
			default: ''
		},
		popupTitle: {
			type: String,
			default: '选择优惠券'
		},
		use_type: {
			type: String,
			default: '1', //1 => '商品类',2 => '家政类',3 => '陪护类' 4 => '旅游类',5 => '文娱类',6 => '康养类',
		},
		total_price: {
			type: String,
			default: '0',
		},
	})
	const emits = defineEmits(['cancel', 'confirm'])
	const couponList = ref([])
	onMounted(() => {
		if (!props.use_type) return console.warn('请传入use_type');
		if (props.use_type) queryParams.value.use_type = props.use_type
		if (!props.total_price) return console.warn('请传入total_price');
		if (props.total_price) queryParams.value.total_price = props.total_price
		selectCoupon(queryParams.value).then(res => couponList.value = res.data)
	})
	// popup
	const showPopup = ref(false)
	const onCancel = () => {
		showPopup.value = false
		emits('cancel')
	}
	const confirmData = ref({
		coupon_name: '',
		coupon_price: ''
	})
	const onConfirm = (data) => {
		confirmData.value = data
		showPopup.value = false
		emits('confirm', '')
	}
	defineExpose({
		name: 'select-coupon'
	})
</script>

<style lang="scss" scoped>
	.select-coupon {
		width: 100%;

	}
</style>